﻿@model Kelper.Domain.Models.Recipe
@{
    ViewBag.Title = "Kelper - " + ViewBag.Action + " a new recipe";
}
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.validate.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/auto-ingredients.js")"></script>

<h2>@ViewBag.Action a recipe</h2>

@using (Html.BeginForm(null, null, FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    <div>
        @Html.ValidationSummary(false)

        <div class="half-width">
            @Html.LabelFor(m => m.Name)<br />
            @Html.EditorFor(m => m.Name)
        </div>
        <div class="editor-field">
            @Html.Label("Type", "Category")<br />
            @Html.DropDownList("Type", new SelectList(ViewBag.Categories))
        </div>
        <div class="editor-field half-width">
            @Html.LabelFor(m => m.Text)<br />
            @Html.EditorFor(m => m.Text)
        </div>
        <div class="editor-field half-width">
            <label for="recipeIngredients">Ingredients (separate the necessary ingredients by commas)</label>
            <a href="@Url.Content("~/about-ingredients.html")" target="_blank" class="subtle remote-url">
                How should ingredients be selected?
            </a><br />
            @Html.TextBox("recipeIngredients")
        </div>
        <br />
        <div class="editor-field">
            <table>
                <tr>
                    <td>
                        @Html.Label("image", "Add an image to the recipe:")<br />
                        <input type="file" id="image" name="image" />
                    </td>
                    @if (ViewBag.HasImage == true)
                    {
                        <td>
                            <img style="max-width:50%" alt="image" src="@Url.Action("Image", new { id = Model.ID })" /><br />
                            <input type="submit" name="button" value="Remove image" />
                        </td>
                    }
                </tr>
            </table>
        </div>
        <br />
        <input type="submit" name="button" value="Submit recipe" />
    </div>
}